<template>
  <view class="container">
    <!-- 搜索区域 -->
    <uni-search-bar 
      v-model="searchKey"
      placeholder="输入订单号进行搜索"
      @confirm="handleSearch"
      cancel-button="none"
      class="search-bar"
    />
    
    <!-- 订单列表 -->
    <scroll-view scroll-y class="order-list">
      <text class="total-text">共{{ orders.length }}条</text>
      
      <!-- 订单项循环 -->
      <view 
        v-for="(order, index) in orders" 
        :key="index"
        class="order-item"
      >
        <view class="order-header">
          <text class="order-number">订单号：{{ order.orderNumber }}</text>
          <text class="order-amount">{{ order.amount }}元</text>
        </view>
        
        <view class="order-detail">
          <text class="detail-label">下单用户：</text>
          <text class="detail-value">{{ order.user }}</text>
        </view>
        
        <view class="order-detail">
          <text class="detail-label">预约时间：</text>
          <text class="detail-value">{{ order.appointmentTime }}</text>
        </view>
        
        <view class="order-detail multi-line">
          <text class="detail-label">服务项目：</text>
          <text class="detail-value">{{ order.services.join('、') }}</text>
        </view>
        
		
        <view class="order-detail">
          <text class="detail-label">下单时间：</text>
          <text class="detail-value">{{ order.orderTime }}</text>
        </view>
        
        <button class="detail-btn" @click="viewDetail(order)">查看详情</button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 搜索关键词
const searchKey = ref('');

// 订单数据
const orders = ref([
  {
    orderNumber: '2021010831213',
    amount: '2000.00',
    user: '张三丰',
    appointmentTime: '2022-10-10 11:00',
    services: ['宝马X5加装轮毂', '清洁车辆', '汽车美容'],
    orderTime: '2022-10-10 11:09'
  },
  // 第二个订单数据
  {
    orderNumber: '2021010831213',
    amount: '2000.00',
    user: '张三丰',
    appointmentTime: '2022-10-10 11:00',
    services: ['宝马X5加装轮毂', '清洁车辆', '汽车美容'],
    orderTime: '2022-10-10 11:09'
  },
  // 第三个订单数据（用户名为张三丰丰）
  {
    orderNumber: '2021010831213',
    amount: '2000.00',
    user: '张三丰丰',
    appointmentTime: '2022-10-10 11:00',
    services: ['宝马X5加装轮毂', '清洁车辆', '汽车美容'],
    orderTime: '2022-10-10 11:09'
  }
]);

// 查看详情
const viewDetail = (order) => {
	console.log('nmsl');
  // uni.showModal({
  //   title: '订单详情',
  //   content: JSON.stringify(order, null, 2),
  //   showCancel: false
  // });
};

// 搜索处理
const handleSearch = () => {
  // 实际开发中可接入接口搜索
};
</script>

<style lang="scss">
	
	// 公共样式混入
	@mixin flex-between {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	@mixin flex-start {
	  display: flex;
	  align-items: center;
	}
	
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  background-color: #fff;
  border-radius: 8rpx;
}

.order-list {
  height: calc(100vh - 120rpx);
  margin-top: 20rpx;
}

.total-text {
  display: block;
  color: #999;
  font-size: 24rpx;
  padding: 15rpx 0;
}

.order-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
  
  .order-header {
    @include flex-between;
    margin-bottom: 20rpx;
    
    .order-number {
      color: #333;
      font-size: 28rpx;
    }
    
    .order-amount {
      color: #007AFF;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  
  .order-detail {
    @include flex-start;
    margin-bottom: 15rpx;
    font-size: 26rpx;
    
    &.multi-line {
      align-items: flex-start;
    }
    
    .detail-label {
      color: #666;
      min-width: 140rpx;
    }
    
    .detail-value {
      color: #333;
      flex: 1;
    }
  }
}

.detail-btn {
  margin-top: 30rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 50rpx;
  font-size: 28rpx;
  padding: 0 40rpx;
  height: 70rpx;
  line-height: 70rpx;
}


</style>